<!--
 * @description  : 市管-检查列表展示组件
 * @descriptionDetail: 市管-检查列表展示组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-12 18:43:02
-->
<template>
  <view v-on="listeners">
    <u-card :head-style="headStyle" :body-style="bodyStyle" :foot-border-top="false" margin="20rpx" box-shadow="#e5e5e5 0px 0px 50px" padding="12" v-on="listeners">
      <view slot="head" @click.native="handlerCheckDetail(data)">
        <u-row>
          <u-col span="1">
            <u-icon
              size="40"
              style="font-weight: 600"
              label-size="30"
              label-color="#333" 
              name="../../static/check/licence.png"
              v-if="data.taskSubject == CHECK_TASK_SUBJECT.haveLicense"
            ></u-icon>
            <u-icon
              size="40"
              style="font-weight: 600"
              label-size="30"
              label-color="#333" 
              name="../../static/check/nolicence.png"
              v-else
            ></u-icon>  
          </u-col>
          <u-col span="9">
            <view class="u-icon-name">
              {{ data.taskSubject == CHECK_TASK_SUBJECT.haveLicense? data.companyName :data.companyName+'(无证户)' }}
            </view>
          </u-col>
          <u-col span="2">
            <view>
              <!-- 状态 -->
              <u-tag
                style="float:right;border:none;width: 120rpx;height: 56rpx;line-height: 32rpx;border-radius: 28rpx;"
                shape="circle" 
                :type="getStatusColor(data)" 
                :text="getStatusName(data)"
              />
            </view>
          </u-col>
        </u-row>
      </view>
      <view slot="body" @click.native="handlerCheckDetail(data)">
        <u-row>
          <u-col span="12" style="margin-bottom: 5px;" v-if="data.note">
            <u-tag text="无证" type="info" shape="circle" class="tag-info" v-if="data.taskSubject == CHECK_TASK_SUBJECT.noHaveLic" />
            <!-- 任务池任务描述 -->
            <u-tag :text="data.note" type="info" shape="circle" class="tag-info" />
          </u-col>       
          <u-col span="12" style="margin-bottom: 5px;" class="u-p-t-10">
            <view>许可证号：{{ data.licNo }}</view>
          </u-col>
          <u-col span="12" style="margin-bottom: 5px;" class="u-p-t-10">
            <view>{{ data.businessAddr }}</view>
          </u-col>  
          <u-col span="12" style="margin-bottom: 5px;">
            {{ $u.dic.getDicNameByKeyCode($u.dic.DIC_KEYS.M_DAY_PLAN_TYPE,data.dayPlanType) ||"" }}
          </u-col>
        </u-row>
      </view>
      <view slot="foot">
        <u-row>
          <u-col span="4">
            <view class="part-item-info">
              <u-icon :label="data.managerName" size="30" name="../../static/check/manager.png" v-if="data.managerName"></u-icon>
            </view>
          </u-col>
          <u-col span="4">
            <view class="part-item-info" v-if="data.retailTel" @click="handlerShowPhone">
              <u-icon label="电话" size="28" name="phone-fill" :color="$theme.u_type_primary"></u-icon>
            </view>
            <view class="part-item-info" v-else @click="handlerShowPhone">
              <u-icon label="电话" size="28" name="phone-fill"></u-icon>
            </view>
          </u-col>
          <u-col span="4">
            <view class="part-item-info" @click="handlerGoto">
              <u-icon label="导航" size="36" name="../../static/check/goto.png"></u-icon>
            </view>
          </u-col>
        </u-row>
      </view>
    </u-card>
  </view>
</template>
<script>
import checkService from "@/service/check/check.service";
import {CHECK_TASK_SUBJECT,} from "@/common/common_enum.js";
import {M_DAY_PLAN_STATUS,} from "@/service/check/mapping/enum.js";
export default {
  name: "CheckItem",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tels: [],
      headStyle: {
        margin: '10px 10px 5px 10px',
        padding: '5px 0',
      },
      bodyStyle: {
        margin: '10px 10px 0px 10px',
        padding: 0,
      },
      CHECK_TASK_SUBJECT,
      M_DAY_PLAN_STATUS,
    }
  },
  computed: {
    listeners() {
      return Object.assign({},
        // 从父级添加所有的监听器
        this.$listeners,
      )
    },
  },
  methods: {
    getStatusColor(item){
      if(!item.status && item.signStatus == '02'){
        return "primary";
      }else if(item.status == '02'){
        return "success";
      }else if(item.status == '03'){
        return "error";
      }else{
        return "info";
      }
    },
    getStatusName(item){
      if(!item.status && item.signStatus == '02'){
        return "已签到";
      }else if(item.status == '02'){
        return "已完成";
      }else if(item.status == '03'){
        return "已终止";
      }else{
        return "未开始";
      }
    },
    // 显示联系电话
    handlerShowPhone(e) {	
      this.tels = [];
      if(this.data.retailTel == null || this.data.retailTel == ''){
        this.$modal.alert("当前记录未维护电话");
        return;
      }else{
        this.tels = this.data.retailTel.split(',');  
      }
		
      if (this.tels.length > 0) { 
        // 此处不能使用u-action-sheet，在u-swipe-action中使用时样式异常
        uni.showActionSheet({
          itemList: this.tels,
          itemColor: this.$theme.u_type_primary,
          success: ({tapIndex,}) => this.doPhone(this.tels[tapIndex]),
        });
        return;
      }
      e.stopPropagation();
      e.preventDefault();
    },
    // 拨打电话
    doPhone(telStr) {
      let tel = telStr.substring(telStr.indexOf(" "));
      this.$deviceApi.makePhoneCall(tel);
    },
    // 导航
    handlerGoto(e) {
      if(this.$deviceApi.navigateMap){
        if(!this.data.longitude || !this.data.latitude){
          this.$modal.alert("当前零售户未采集坐标，无法导航");
          return;
        }
        this.$deviceApi.navigateMap(this.data.latitude, this.data.longitude, this.data.companyName);
      }else{
        this.$u.toast('非钉钉环境，不支持导航');
      }
      e.stopPropagation();
      e.preventDefault();
    },	
    handlerCheckDetail(detail){
      // 计划不是已终止的可以进行检查
      if(detail.dayPlanStatus != M_DAY_PLAN_STATUS.TERMINATION){
        // 根据groupUuid判断是否是32015电子烟客户检查
        if(detail.groupUuid == '32015'){
          this.setRouteParam(detail);
          this.$u.route('/pages/eCigar/eCigarCheckItem');
          return;
        }else{
          if(detail.status == '03'){ // 如果任务已经终止则不能点击进入
            return;
          }
          // 有证户检查要阅读检查作业指导书，无证户、已完成的检查任务不用阅读
          // if (!detail.isHaveLicense || (detail.status == '2' && detail.isFinish)) {
          if(detail.taskSubject == CHECK_TASK_SUBJECT.noHaveLic || detail.status == '02'){
            this.setRouteParam(detail);
            this.$u.route('/pages/check/checkDetail');
            return;
          }
          this.setRouteParam(detail);
          this.$u.route('/pages/check/checkGuide?retailerUuid=' + detail.retailerUuid + '&taskSubject=' + detail.taskSubject);
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 15px;
  color: #666;
  font-weight: 600;
  margin: 5px 10px;
}
.sub-title {
  color: #666;
  margin: 3px 10px;
}
.tag-info {
  font-weight: 600;
  color: #666;
  margin-right: 5px;
}
.part-item-info {
  padding: 5px 0px;
}
.u-icon-name {
	//color: $u-tips-color;
	word-wrap: break-word;
	word-break:break-all;
	//margin-top: 16rpx;
	font-size: 30rpx;
	//padding: 0 14rpx;
	// 给定高度是为了图标名超出一行时，进行换行能有更好的效果
	//height: 26rpx;
	font-weight: 600;
    padding-right: 5px;
	padding-bottom: 5px;
}
</style>
